<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="我的代表证"></fa-navbar>
		<view class="card">
			<view class="topImage">
				<image :src="card1" mode=""></image>
			</view>
			<view class="bottomImage">
				<view class="image">
					<image :src="card2" mode=""></image>
				</view>
				<view class="message">
					<view class="headPortrait">
						<image :src="userInfo.inch_avatar" mode="aspectFill"></image>
					</view>
					<view class="rightMsg">
					<view class="name">
						{{userInfo.nickname}}
					</view>
					<view class="sex">
						{{userInfo.gender}}
					</view>
					<view class="post" v-if="userInfo.group_name != ''">
						{{userInfo.group_name}}
					</view >
						<view class="post" v-if="userInfo.group_name == ''">
							无
						</view >
					<view class="cardNumber">
						{{userInfo.card_no}}
					</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// onLoad: async function() {
		// 	let res = await this.$api.getMyboutus();
		// 	if (!res.code) {
		// 		this.$u.toast(res.msg);
		// 		return;
		// 	}
		// 	this.pageInfo = res.data.pageInfo;
		// },
		data() {
			return {
			userInfo:[],
			card1:'',
			card2:''
			};
		},
		onLoad(){
			this.getUserIndex()
			this.card1 = this.$image_url + "/uploads/uniapp/image/card1.jpg"
			this.card2 = this.$image_url + "/uploads/uniapp/image/card2.jpg"
		},
		methods: {
			getUserIndex: async function() {
				let res = await this.$api.getUserIndex();
				// console.log(res,'res');
				uni.stopPullDownRefresh();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.$u.vuex('vuex_user', res.data.userInfo || {});
			this.userInfo = res.data.userInfo
				console.log(this.userInfo,'this.userInfo');
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f6f8;
	}

	.card {
		background-color: #f4f6f8;

		.topImage {
			width: 670rpx;
			height: 420rpx;
			margin: 90rpx auto;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.bottomImage {
			position: relative;
			width: 670rpx;
			height: 420rpx;
			margin: 70rpx auto;
			background-color: #fff;

			.image {
				width: 670rpx;
				height: 420rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.message {
			// position: relative;
				.headPortrait {
					position: absolute;
					left: 69rpx;
					top: 78rpx;
					z-index: 999;
					width: 181rpx;
					height: 261rpx;
					border-radius: 12rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
						border: solid 2rpx #ffffff;


					}
				}

				.rightMsg {
					position: absolute;
					right: 120rpx;
					top: 103rpx;
					z-index: 999;
					font-size: 26rpx;
					color: #fff;
					width: 200rpx;
					.name {
						// position: fixed;
						// top: 10rpx;
						// left: 0;
						// margin-top: 20rpx;
						// padding-bottom: 20rpx;
						position: absolute;
						top: 0;
						left: 70rpx;
					}
					.sex {
						// padding-top: 5rpx;
						position: absolute;
						top: 60rpx;
						left: 70rpx;
					}
					.post {
						// padding-top: 27rpx;
						position: absolute;
						top: 120rpx;
						left: 70rpx;
					}
					.cardNumber {
						// padding-top: 27rpx;
						position: absolute;
						top: 184rpx;
						left: 70rpx;
					}
				}
			}

		}
	}
</style>
